<template>
	<view class="new_order_page">
		<view class="top">
			<view class="wrap">
				<view class="title_bar">订单类型</view>
				<text class="text te">{{orderType}}</text>
			</view>
			<view class="wrap">
				<view class="title_bar">订单状态</view>
				<text class="text">{{startsName}}</text>
			</view>
			
			
		</view>
		<!-- 录入信息板块 -->
		<view class="con">
			<scroll-view class="scroll-y padtop"  scroll-y>
				<!--end产品添加-->
				<view class="newOrderWrap">
					<zzdTemplate v-if="orderProductId == 0":formData ="formData"  @postOrderInfo="updateOrder" ref="chil"
						:isOurSelf="isOurSelf"></zzdTemplate>
					<ajfTemplate v-if="orderProductId == 2" :formData ="formData"  @postOrderInfo="updateOrder" ref="chil"
						:isOurSelf="isOurSelf" :form1 = "form1"  ></ajfTemplate>
					<accTemplate v-if="orderProductId == 1" :formData ="formData"  @postOrderInfo="updateOrder" ref="chil"
						:isOurSelf="isOurSelf"></accTemplate>
					<ajslTemplate v-if="orderProductId == 3"  :formData ="formData"  @postOrderInfo="updateOrder" ref="chil"
						:isOurSelf="isOurSelf"></ajslTemplate>
					<fpfTemplate v-if="orderProductId == 4"  :formData ="formData"  @postOrderInfo="updateOrder" ref="chil"
						:isOurSelf="isOurSelf"></fpfTemplate>
				</view> 
				<!--start 上传图片-->
				<view class="img_upload_wrap clearfix">
					<uploadImg v-if="flieList" :flieList="flieList" :orderNumber="orderNumber" :productId="productId" ref="childImg"
						:isOurSelf="isOurSelf"></uploadImg>
				</view>
				<!--end 上传图片-->
				<!--start操作记录-->
				<view class="cz_wrap clearfix">
					<view class="title_bar">操作记录</view>
					<!-- 纵向排列 -->
					<view class="wecentBor">
						<block v-for="item in axis" :key="item.id">
							<view class='weui-cell-list clearfix'>
								<view class='weui-cell-line clearfix'>
									<view class='weui-cell-circle'>
										<view></view>
									</view>
									<view class='weui-cell-time floarLeft'>{{item.updateTime}}</view>
									<view class='weui-cell-event floarLeft' v-if="orderStarts==0||orderStarts==1||orderStarts==2||orderStarts==3||orderStarts==11">
										{{item.userName}}{{item.description}}
										<view>{{item.causeRemark}}</view>
									</view> 
									<view class='weui-cell-event floarLeft'v-else>
										{{item.description}}
										<view style="color: #FF3347;">{{item.causeRemark}}</view>
									</view>
								</view>
							</view>
						</block>
						<view class="inptu">
							 <textarea class="area"  placeholder="请写一条" v-model="jy"/>
						</view>
					</view>
					
				</view>
				<!--start操作记录-->
				<!--确认提交-->
				<view class="Submit_wrap">
					<button class="btnSubmit" @click="btnSubmit">确 认</button>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';

	//获取子组件
	import zzdTemplate from './orderTemplate/zzd.vue';
	import ajfTemplate from './orderTemplate/ajf.vue';
	import accTemplate from './orderTemplate/accfund.vue';
	import ajslTemplate from './orderTemplate/ajsl.vue';
	import lebTemplate from './orderTemplate/leb.vue';
	import fpfTemplate from './orderTemplate/fpf.vue';
	import uploadImg from'./orderTemplate/uploadImg.vue';
	export default {
		data() {
			return {
				orderItem:[],
				orderItemActive:null,
				//当前产品模板id
				orderProductId: null,
				form1: {
					brokerMin: null,
					brokerMax: null,
					intentionAddMoney: null,
					brokerType: null,
					brokerRatio: null,
					empClass: null
				},
				orderNumber: "",
				productId: "",
				flieList: [],
				formData: {},
				startsName: "",
				orderType: "",
				axis:[],
				orderStarts: null,
				jy: null,
				isOurSelf: false,
			}
		},
		components: {
			zzdTemplate,
			ajfTemplate,
			accTemplate,
			ajslTemplate,
			lebTemplate,
			fpfTemplate,
			uploadImg
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad(option) {
			this.orderNumber = option.id;
			this.getOrderDetail(option.id);
			this.getOrderCz(option.id)
		},
		methods: {
			//提交事件
			btnSubmit() {
				this.$refs.chil.btnSubmit()
			},
			updateOrder(obj) {
				for(var key in obj){
				    if(!obj[key]){
				       delete obj[key]
				    }
				 }
				let updateData = {};
				updateData.form = obj;
				updateData.orderNumber = obj.orderNumber;
				updateData.msg = this.jy;
				//验证图片
				let childData =this.$refs.childImg;
				//判断是否上传身份证正面
				if(childData.cardlist.length<1){
					uni.showModal({
					    title: '提示',
					    content: '请上传身份证正面',
					    success: function (res) {}})
					return
				}
				//判断是否上传身份正反面
				if(childData.cardlistBack.length<1){
					uni.showModal({
					    title: '提示',
					    content: '请上传身份证反面',
					    success: function (res) {}})
					return
				}
				this.$api.updateOrder(updateData).then( res=> {
					let resData = res.data;
					if(resData.code == 200){
						uni.showModal({
										title: '提示',
										content: resData.message,
										showCancel: false,//是否显示取消按钮
										confirmText: "确定",
										success: function (res) {
											if (res.cancel) {
											} else {
												uni.navigateBack({
													delta: 1
												})
											}
										}
									})
					}
				}).catch()
			},
			//获取操作记录
			getOrderCz(orderNumber){
				this.$api.getOrderCz(orderNumber).then( res =>{
					this.axis = res.data.data;
				})
			},
			//获取订单详细
			async getOrderDetail(id){
			try{
				let getData = await	this.$api.getOrderFileByNumber(id);
				let resData = getData.data.data;
				this.orderStarts = resData.starts;
				this.formData = resData.form;
				this.productId = resData.productMode.id;
				this.orderProductId = resData.productMode.minProcedureCode;
				this.startsName = resData.startsName;
				this.orderType = resData.productMode.productName;
				this.flieList = resData.accessory;
				
				if(this.orderStarts !=0 ){
					this.isOurSelf = true;
				}else if( this.flieList == null ){
					this.isOurSelf = true;
				}
				
				if(this.orderProductId == 4) {
					this.isOurSelf = true;
				}
				//佣金预计需要的数据
				let empClass = this.userInfo.empClass;
				if(empClass == 1){
					this.form1.brokerMin = resData.productMode.employeeMin;
					this.form1.brokerMax = resData.productMode.employeeMax;
					this.form1.intentionAddMoney = resData.productMode.employeeSubjoin;;
					this.form1.brokerType =  resData.productMode.employeeType;
					this.form1.brokerRatio =  resData.productMode.employeeRatio;
					this.form1.empClass = empClass;
				}else{
					this.form1.brokerMin = resData.productMode.brokerMin,
					this.form1.brokerMax = resData.productMode.brokerMax,
					this.form1.intentionAddMoney = resData.productMode.brokerSubjoin,
					this.form1.brokerType = resData.productMode.brokerType,
					this.form1.brokerRati = resData.productMode.brokerRatio,
					this.form1.empClass = empClass
				}
			}catch(error){
				console.log(error)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* #ifndef APP-PLUS */
	page {
	    width: 100%;
		height: 100%;
	    min-height: 100%;
		background: #F5F5F5;
	}
	/* #endif */
	.new_order_page{
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		/* #ifdef APP-PLUS*/
		height: 100vh;
		/* #endif */
	}
	.top{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30rpx 40rpx;
		.title_bar {
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 42rpx;
			margin: 20rpx 0;
		}
		.text{
			font-size: 14px;
			color: #52AAF8;
		}
		.te{
			background-color: rgb(225, 244, 255);
			border-color: rgb(225, 244, 255);
			color: #52AAF8;
			border-radius: 25px;
			font-size: 14px;
			padding: 8rpx 20rpx;
		}
	}
	.con{
		flex: 1;
		overflow: hidden;
	}
	.scroll-y{
		height: 100%;
		width: 750rpx;
	}
	.order_nav{
		background: #FFFFFF;
		padding: 20rpx 48rpx 10rpx 48rpx;
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
		.item{
			padding: 8rpx 34rpx;
			color:#333333 ;
			font-size: 28rpx;
			margin: 0 20rpx 20rpx 0;
			float: left;
			border-radius: 28px;
			background: rgba(#f3f8ff,1);
		}
		.item.active{
			color: #FFFFFF;
			background: #52aaf8;
		}
	}
	.miaoshu {
		width: 100%;
		padding: 50rpx 0;
		background-color: white;
		margin-top: 20rpx;
		text-align: center;
		.miaoshutext1 {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
		.miaoshutext2 {
			font-size: 14px;
			font-weight: Medium;
			color: #333333;
			margin: 25rpx 0;
		}
		.miaoshutext3 {
			display: inline-block;
			width: 330rpx;
			background-color: #52AAF8;
			color: white;
			font-size: 14px;
			margin: 0 auto;
			border-radius: 25px;
			height: 56rpx;
			line-height: 56rpx;
		}
	}
	.shuoming {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: white;
		.proDet{
			background: #f9fbff;
			margin: unset !important;
		}
	}
	.img_upload_wrap{
		background: #FFFFFF;
		padding-top: 20rpx;
	}
	.cz_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30rpx 40rpx;
		.title_bar {
			height: 38rpx;
			line-height: 38rpx;
			font-size: 32rpx;
			border-left: 6rpx solid #52aaf8 ;
			padding-left: 20rpx;
			margin-bottom: 30rpx;
			margin-top: 10rpx;
		}
		.wecentBor {
		    padding: 40rpx 10rpx 10rpx 10rpx;
		    background: #FAFAFC;
		    border-radius: 10rpx;
		    box-shadow: 0px 0px 15px #FAFAFC;
		}
		
		.weui-cell-line {
		    margin-left: 5px;
		    border-left: 1px solid #EEEEEE;
		    min-height: 160rpx;
		    position: relative;
		}
		
		.weui-cell-list:first-child .weui-cell-circle {
		    border: 1px solid #52AAF8;
		    background-color: #52AAF8;
		}
		
		.weui-cell-list .weui-cell-circle {
		    position: absolute;
		    left: -17rpx;
		    top: 30rpx;
		    background-color: #52AAF8;
		    width: 15px;
		    height: 15px;
		    border: 0;
		    border-radius: 10px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
		
		.weui-cell-circle>view {
		    border: 1px solid white;
		    border-radius: 5px;
		    width: 7px;
		    height: 7px;
		    background-color: white;
		    border-color: white;
		}
		
		.weui-cell-time {
		    font-size: 12px;
		    padding-left: 15px;
		    width: 100%;
		    color: #999999;
		    padding-top: 15px;
		}
		
		.weui-cell-event {
		    padding:20rpx;
		    margin: 10rpx  0 30rpx 30rpx;
		    font-size: 14px;
		    color: #333333;
		    background-color: white;
		    border-radius: 5px;
		    line-height: 45rpx;
		}
		
		.weui-cell-list:last-child .weui-cell-line {
		    border: 0;
		}
		.inptu {
		    width: 94%;
		    margin: 50rpx auto;
		    height: 6rem;
		    background-color: white;
		    border-radius: 10rpx;
		    box-shadow: 0px 0px 15px #FAFAFC;
		}
		.area {
		    width: 100%;
		    height: 240rpx;
		    padding: 15rpx 20rpx;
		}
	}
	.Submit_wrap{
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		.btnSubmit{
			background-color: #52AAF8;
			color: white;
			font-size: 18px;
			border-radius: 25px;
		}
	}
	
</style>
